<template>
  <div class="box">
    <vxe-toolbar id="toolbarId" :custom="{ storage: true }" export :refresh="{ query: findList }">
      <template v-slot:buttons>
        <el-button @click="funcFilter">查询</el-button>
        <el-button @click="addZone">添加</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTable4"
      border
      resizable
      stripe
      highlight-current-row
      highlight-hover-row
      row-id="id"
      height="700"
      :show-footer="true"
      :loading="loading"
      :data="tableData"
      :sort-config="{ remote: true }"
      export-config
      show-overflow
      align="center"
      @sort-change="sortList"  
    >
    <vxe-table-column type="checkbox" width="60"  fixed="left" />
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column type="expand" title="区域" width="90">
        <template v-slot="{ row, rowIndex }">
          <span>展开</span>
        </template>
        <template v-slot:content="{ row, rowIndex }">
          <template>
            <vxe-table
              border
              size="small"
              :data="row.lineAreaList"
              style="width:35%"
            >
            <vxe-table-column type="checkbox" width="60"  />
              <vxe-table-column width="60" type="seq" title="序号"></vxe-table-column>
              <vxe-table-column field="areaName" min-width="100" title="区域" 
                                ></vxe-table-column>
              <vxe-table-column   title="操作" min-width="120"  field="action">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="上移" placement="top">
                    <vxe-button type="text" @click="sortUp(scope.row)">
                      <i class="el-icon-top"/>
                    </vxe-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="下移" placement="top">
                    <vxe-button type="text" @click="sortDown(scope.row)">
                      <i class="el-icon-bottom"/>
                    </vxe-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <vxe-button type="text" @click="funcDeleteArea(scope.row.code)">
                      <i class="el-icon-delete"/>
                    </vxe-button>
                  </el-tooltip>
                </template>
              </vxe-table-column>
            </vxe-table>
          </template>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="name"
          title="线路名称"
          min-width="180"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.name" placeholder="请输入线路名称" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="licenseNumber"
          title="默认车辆"
          min-width="150"
          sortable
        />
        <template v-slot:header>
          <el-input v-model="listQuery.licenseNumber" placeholder="请输入车牌号" clearable/>
        </template>
      </vxe-table-column>
      <vxe-table-column min-width="210" field="description" title="描述" 
                        ></vxe-table-column>
      <vxe-table-column min-width="150" field="gmtCreated" title="创建时间" 
                        ></vxe-table-column>
      <vxe-table-column   title="操作" min-width="140" fixed="right"  field="action">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <vxe-button type="text" @click="editZone(scope.row)">
              <i class="el-icon-edit"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <vxe-button type="text" @click="funcDelete(scope.row.code)">
              <i class="el-icon-delete"/>
            </vxe-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="添加区域" placement="top">
            <vxe-button type="text" @click="plusZone(scope.row.code)">
              <i class="el-icon-plus"/>
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
    <vxe-modal v-model="modelAddShow" :lock-scroll="false" width="600" height="400" title="基本信息">
      <addInformation ref="addRef" @hideModel="cancel"/>
    </vxe-modal>
    <vxe-modal v-model="modelEditShow" :lock-scroll="false" width="600" height="400" title="基本信息">
      <editInformation ref="editRef" @hideModel="cancel"/>
    </vxe-modal>
    <vxe-modal v-model="modelPlusShow" :lock-scroll="false" width="500" height="400" title="添加区域">
      <zonePlus ref="plusRef" @hideModel="cancel"/>
    </vxe-modal>
  </div>
</template>
<script>
  import XEUtils from "xe-utils";
  import {
    getShipmentLineList,
    delShipmentLineInfo,
    delShipmentLineArea,
    sequenceShipmentLineArea
  } from "@/api/shipment";
  import addInformation from './components/add.vue'
  import editInformation from './components/edit.vue'
  import zonePlus from './components/zonePlus.vue'

  export default {
    name: "routerManagement",
    components: {
      addInformation,
      editInformation,
      zonePlus
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        },
        tableExport: {
          type: 'xlsx'
        },
        zoneData: [{
          index: '0',
          expressCode: 'SF',
          expressName: '顺丰快递',
          status: true,
        }, {
          index: '1',
          expressCode: 'YTO',
          expressName: '圆通快递',
          status: true,
        }, {
          index: '2',
          expressCode: 'UC',
          expressName: '优速快递',
          status: true,
        }],
        activeNames: ['1'],
        gmtCreatedRange: "",
        gmtAuthRange: "",
        loading: false,
        modelAddShow: false,
        modelEditShow: false,
        modelPlusShow: false,
        tableData: [],
        listQuery: {
          staffType: "0", // 类型（入驻商）
          // userName: "",
          // phone: "",
          // freezingAmount: "",
          // amountStart: "",
          // amountEnd: "",
          // taxPoint: "",
          // authStatus: "",
          // gmtCreatedStart: "",
          // gmtCreatedEnd: "",
          // authTimeStart: "",
          // authTimeEnd: "",
          // isIndependentCheckout: "",
          pageNum: 1,
          pageSize: 10,
          sortField: "",
          sortType: "",
          total: 0
        },
        sumObject: {
          freezingAmount: 0,
          amount: 0
        },
      };
    },
    created() {
      this.findList();
      let shipmentUserCode = this.$route.query.partyCode
      this.listQuery.shipmentUserCode = shipmentUserCode;
    },
    methods: {
      findList() {
        this.loading = true;
        return new Promise(resolve => {
          getShipmentLineList(this.listQuery).then(response => {
            this.tableData = response.data.records;
            this.listQuery.total = response.data.total;
            this.sumObject = response.data.sumObject;
            this.loading = false;
            resolve()
          });
        })
      },
      // 时间
      changeDate(value, prefix) {
        if (value) {
          this.listQuery[`${prefix}Start`] = value[0] + " 00:00:00";
          this.listQuery[`${prefix}End`] = value[1] + " 23:59:59";
        } else {
          this.listQuery[`${prefix}Start`] = "";
          this.listQuery[`${prefix}End`] = "";
        }
      },
      handleChange(val) {
      },
      // 排序
      sortList({column, property, order}) {
        this.listQuery.sortField = property;
        this.listQuery.sortType = order;
        this.findList();
      },
      // 查询
      funcFilter() {
        this.listQuery.pageNum = 1
        this.findList()
      },
      // 删除方法
      funcDelete(code) {
        this.$confirm("是否删除此线路？")
          .then(_ => {
            delShipmentLineInfo({code}).then(response => {
              this.$message({message: response.msg, type: "success"});
              this.findList();
            });
          })
          .catch(_ => {
          });
      },
      // 删除区域方法
      funcDeleteArea(code) {
        this.$confirm("是否删除此区域？")
          .then(_ => {
            delShipmentLineArea({code}).then(response => {
              this.$message({message: response.msg, type: "success"});
              this.findList();
            });
          })
          .catch(_ => {
          });
      },
      plusZone(code) {
        this.modelPlusShow = true;
        this.$refs.plusRef.getInfo(code, this.listQuery.shipmentUserCode);
      },
      addZone() {
        this.modelAddShow = true;
      },
      sortUp(row) {
        sequenceShipmentLineArea({code: row.code, type: 1}).then(response => {
          this.$message({message: response.msg, type: "success"});
          this.findList();
        });
      },
      sortDown(row) {
        sequenceShipmentLineArea({code: row.code, type: 2}).then(response => {
          this.$message({message: response.msg, type: "success"});
          this.findList();
        });
      },
      // 编辑区域
      editZone(data) {
        this.modelEditShow = true;
        this.$refs.editRef.getInfo(data.code);
      },
      cancel() {
        this.modelAddShow = false;
        this.modelEditShow = false;
        this.modelPlusShow = false;
        this.findList();
      },
      // 分页handle
      handlePageChange({currentPage, pageSize}) {
        this.listQuery.pageNum = currentPage;
        this.listQuery.pageSize = pageSize;
        this.findList();
      },
      // 设置底部合计
      footerMethod({columns, data}) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 0) {
              return "合计";
            }
            if (columnIndex === 3) {
              // 冻结金额
              return this.sumObject.freezingAmount;
            }
            if (columnIndex === 4) {
              // 账户金额
              return this.sumObject.amount;
            }
            if (["pageviews", "forecast"].includes(column.property)) {
              return XEUtils.sum(data, column.property);
            }
            return null;
          })
        ];
      }
    }
  };
</script>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis),
  .vxe-table .vxe-footer--column:not(.col--ellipsis),
  .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }

  .vxe-toolbar {
    padding: 0 0 10px 0;
  }

  .box {
    padding: 10px 20px;
  }
</style>
